<template>
  <div class="l_container">
    <q-img src="images/login/loginbg.png" class="bg_img">
      <div class="bg_con">
        <q-img class="bg-transparent" src="images/login/loginicon.png" width="400px"
          style="top:100px"></q-img>
        <div class="q-pa-md form_container" :style="{ top: top}">
          <q-card class="f_card">
            <slot></slot>
          </q-card>
        </div>
      </div>
    </q-img>
  </div>
</template>

<script>
export default {
  name: 'loginLayout',
  props: {
    top: { type: String, default: '50px' },
  },
};
</script>

<style lang="scss" scoped>
.f_card{
  padding:0 37px;
  padding-bottom: 60px;
}
.bg_con{
  width: 1200px;
  position: relative;
  margin: 0 auto;
  background-color: transparent;
}
.form_container{
  width: 556px;
  position: absolute;
  right: 0px;
  top:50px;
}
.bg_img{
  height: 700px;
  position: relative;
}
</style>
